<template>
  <div class="register-con">
    <div class="register-box">
      <div class="register-bg">
        <p class="register-bg-begin">为您提供一站式</p>
        <p class="register-bg-title">会议营销解决方案</p>
        <p class="register-bg-t-gary">庞大的数据库·专业团队·全流程服务</p>
        <!-- <img src="https://img1.17img.cn/ui/simg/instrument/20220308/yxt_GIF_8M_20220704.gif" alt=""> -->
        <img
          src="https://img1.17img.cn/ui/simg/instrument/20230302/yht/img/tuxing_20230202.png"
          alt=""
        />
      </div>
      <div class="register-form">
        <p class="form-title">免费会员注册</p>
        <div class="form-box">
          <div class="box-input" :class="{ error: !verification.mobile }">
            <vue-country-intl
              v-model="loginParams.areaCode"
              :show-label-img="false"
              :only-value="true"
              placeholder=""
              @onChange="getChangeCountry"
            />
            <span class="line" />
            <input
              v-model.trim="loginParams.mobile"
              class="input-tel"
              type="text"
              placeholder="请输入手机号码"
              maxlength="11"
              @input="getInputChange"
            />
            <p v-if="!verification.mobile" class="error-tip">
              手机号格式不正确
            </p>
          </div>
          <div class="box-input f-sb" :class="{ error: verification.codeText }">
            <input
              v-model.trim="loginParams.code"
              class="input-code"
              type="text"
              placeholder="请输入验证码"
              @input="getCodeChange"
              @keyup.13="registerBtn"
            />
            <span v-if="timeShow" class="input-send higt" @click="getSendCode"
              >发送验证码</span
            >
            <span v-if="!timeShow" class="input-send higt count"
              >重新获取({{ count }}秒)</span
            >
            <p class="error-tip">{{ verification.codeText }}</p>
          </div>
          <div class="box-read">
            <el-checkbox v-model="loginParams.checked" @change="getChecked" />
            <p class="read-title">
              已阅读并同意<a
                class="t-link"
                target="_blank"
                href="https://img1.17img.cn/ui/simg/instrument/child/webinar2023/yhtserviceagreement.html"
                >《仪会通会员服务协议》</a
              >
            </p>
            <p v-if="!verification.checked" class="error-tip">
              请勾选协议后再进行下一步
            </p>
          </div>
          <el-button class="box-btn" :loading="isRegister" @click="registerBtn"
            >注册仪会通会员</el-button
          >
          <p class="box-tip">如需人工服务，请拨打免费热线 157-1885-0776</p>
          <p class="box-to-login">
            已有账号，去<router-link
              :to="{ path: '/login', query: { type: 'sign' } }"
              >登录</router-link
            >
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from "@/api";
import VueCountryIntl from "vue-country-intl";
import "vue-country-intl/lib/vue-country-intl.css";
import { checkLoginPhone, debounce } from "@/utils/validate";
import { getUserIP } from "@/utils/commin";
export default {
  name: "Register",
  components: { VueCountryIntl },
  data() {
    return {
      isRegister: false,
      loginParams: {
        mobile: "",
        areaCode: "86",
        checked: false,
        code: "",
        loginSource:137,
        source: 0, // 来源
        // ip:''
      },
      verification: {
        mobile: true,
        checked: true,
        codeText: "",
      },
      timeShow: true,
      count: "",
      timer: null,
    };
  },
  mounted() {
    // 埋点
    // this.$sensors.registerPage({
    //   sensorsdata_platform_type: "PC",
    //   sensorsdata_column_name: "仪信通",
    // });
    // this.$sensors.track("sensorsdata_yixintong_event", {
    //   $screen_name: `PC-仪信通-厂商注册页`,
    //   $is_first_time: true,
    //   $url: window.location.href,
    //   $referrer: this.$sensors.getPresetProperties().$referrer,
    // });
  },
  methods: {
    getInputChange: debounce(function () {
      const _this = this;
      _this.verification.mobile = checkLoginPhone(_this.loginParams.mobile);
    }, 500),
    getCodeChange: debounce(function () {
      const _this = this;
      if (_this.loginParams.code === "") {
        _this.verification.codeText = "请输入验证码";
      } else {
        _this.verification.codeText = "";
      }
    }, 200),
    async getSendCode() {
      const _this = this;
      _this.verification.mobile = checkLoginPhone(_this.loginParams.mobile);
      if (!_this.verification.mobile) return false;
      const params = {
        areaCode: "+" + this.loginParams.areaCode,
        mobile: _this.loginParams.mobile,
        type: 0, // 0-快速注册登录时，1-验证码原手机号时，2-修改密码时，3-绑定手机号
      };
      await api.login.sendMobileCode(params);
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.timeShow = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.timeShow = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    async registerBtn() {
      const _this = this;
      // 模拟注册成功
      // _this.$emit('getchangetype', 'information')
      if (!_this.loginParams.mobile) {
        return (_this.verification.mobile = false), false;
      }
      if (!_this.loginParams.code) {
        return (_this.verification.codeText = "请输入验证码"), false;
      }
      if (!_this.loginParams.checked) {
        return (_this.verification.checked = false), false;
      }
      _this.isRegister = true;
      try {
        if (_this.loginParams.areaCode.indexOf("+") === -1) {
          _this.loginParams.areaCode = "+" + _this.loginParams.areaCode;
        }
        await api.login.mobileRegister(_this.loginParams);
        // -1：已退回（弹窗资质审核不通过）
        //  0：待审核（暂无权限资质审核中）
        //  1：直接进入
        //  2：未上传资质（弹窗上传资质）
        //  3：弹窗选择一个账号进入 
        //  4：新用户弹注册表单
       let {data}= await api.login.getUserAuthority()
   if(data.authorityStatus==4){
    _this.isRegister = false;
        localStorage.setItem("RMobile", _this.loginParams.mobile);
        _this.$emit("getchangetype", "information");
   }else {
    this.$message({type:'waring',message:'该账号已注册，请直接登录'})
    _this.$emit("getchangetype", "sign");
   }
        
      } catch (error) {
        _this.isRegister = false;
      }
    },
    getChecked(data) {
      data && (this.verification.checked = true);
    },
    getChangeCountry(data) {
      const _this = this;
      _this.loginParams.areaCode = data.dialCode;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/index.scss";
input[type="password"]::-ms-reveal {
  display: none; // 隐藏input type=password时，浏览器自带的小眼睛
}
.register-con {
  width: 100%;
  min-width: 1200px;
  position: relative;
  background: url(https://img1.17img.cn/ui/simg/instrument/20230302/yht/img/bej_1x_20220302.png)
    no-repeat;
  background-size: cover;
  min-height: 100%;
  .register-box {
    width: 1130px;
    padding: 5% 0;
    box-sizing: border-box;
    margin: 0 auto;
    @include flex(row, flex-start, space-between);

    .register-bg {
      width: 45%;
      .register-bg-begin {
        font-size: 24px;
        color: #4f5862;
        line-height: 28px;
        margin-bottom: 27px;
        letter-spacing: 5px;
      }
      .register-bg-title {
        font-size: 50px;
        letter-spacing: 8.5px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
        line-height: 59px;
        margin-bottom: 6px;
        margin-left: -5px;
      }
      .register-bg-t-gary {
        font-size: 20px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 23px;
        letter-spacing: 9px;
        color: #a7b0c4;
        margin-bottom: 30px;
      }
      img {
        width: 100%;
      }
    }
    .register-form {
      width: 480px;
      height: 520px;
      margin-top: 64px;
      background-color: #fff;
      box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.05);
      padding: 48px 40px;
      box-sizing: border-box;

      .form-title {
        font-size: 30px;
        line-height: 1;
        color: #000;
        font-weight: bold;
        margin-bottom: 50px;
      }
      .form-box {
        width: 400px;

        .box-input {
          width: 100%;
          height: 54px;
          background: #f7f8fa;
          border: 1px solid #f7f8fa;
          margin-bottom: 32px;
          padding: 18px 24px 18px 12px;
          box-sizing: border-box;
          position: relative;
          @include flex(row, center, flex-start);
          &.f-sb {
            @include flex(row, center, space-between);
          }

          &.error {
            border: 1px solid #e53917;

            .error-tip {
              position: absolute;
              bottom: -25px;
              left: 0;
              font-size: 12px;
              color: #e53917;

              & > a {
                font-size: 12px;
                color: #4f5862;
                text-decoration: underline;
              }
            }
          }

          .input-num {
            font-size: 16px;
            color: #000;
            margin-right: 18px;
            line-height: 1;
          }
          &::v-deep .vue-country-intl {
            width: 50px;
            font-size: 16px;
            color: #000;
            line-height: 1;

            .vue-country-list-wrap {
              width: 500px;
            }

            .country-intl-input-wrap {
              border: none;
              border-radius: 0;

              .dropdown-flag {
                display: none;
              }

              .country-intl-input {
                padding: 0;
                height: auto;
                background: #f7f8fa;
              }

              .country-intl-label {
                padding: 0;
                background: transparent;
                height: inherit;
                line-height: 1;
                font-size: 16px;
              }
            }
          }
          .line {
            width: 1px;
            height: 18px;
            display: inline-block;
            vertical-align: middle;
            background-color: rgba(185, 192, 199, 0.4);
          }
          .input-tel {
            width: 87%;
            padding-left: 15px;
            position: relative;
            background: #f7f8fa;
            list-style: none;
            border: none;
            outline: none;
            color: #000;

            ::-webkit-input-placeholder,
            ::-moz-placeholder,
            -ms-input-placeholder {
              color: #b9c0c7;
            }
          }
          .input-code {
            width: 72%;
            position: relative;
            background: #f7f8fa;
            list-style: none;
            border: none;
            outline: none;
            color: #000;
            margin-left: 5px;

            ::-webkit-input-placeholder,
            ::-moz-placeholder,
            -ms-input-placeholder {
              color: #b9c0c7;
            }
          }
          .input-send {
            color: #74808b;
            cursor: pointer;
            width: 33%;
            font-size: 16px;
            cursor: pointer;
            display: block;
            text-align: right;
            &.higt {
              color: #74808B;
            }
            &.count {
              cursor: inherit;
            }

            &:hover {
              opacity: 0.8;
            }
          }
        }
        .box-read {
          width: 100%;
          margin: 32px 0;
          position: relative;
          @include flex(row, center, flex-start);

          .read-title {
            margin-left: 12px;
            font-size: 14px;
            color: #7e8790;

            .t-link {
              color: #0C7FF2;
              transition: 0.2s;

              &:hover {
                // text-decoration: underline;
                font-weight: bold;
              }
            }
          }

          .error-tip {
            position: absolute;
            bottom: -18px;
            font-size: 12px;
            color: #1E84FC;
          }
        }
        .box-btn {
          width: 100%;
          padding: 16px 0 !important;
          background: #1E84FC;
          font-size: 18px;
          color: #ffffff;
          line-height: 1;
          margin-bottom: 48px;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          transition: 0.2s;

          &:hover {
            opacity: 0.8;
          }
        }
        .box-tip {
          width: 100%;
          font-size: 14px;
          color: #7e8790;
          text-align: center;
        }
        .box-to-login {
          width: 100%;
          font-size: 14px;
          color: #7e8790;
          text-align: center;
          margin: 16px auto;
          a {
            color: #1E84FC;
            text-decoration: underline;
            margin-left: 3px;
          }
        }
      }
    }
  }
}
</style>
